{% extends '@AdsPlace/adlayout_es5.twig' %}
{% block body %}
<style>
body{ padding:0; margin:0 auto; overflow:hidden;}
a{ cursor:pointer;}
img{border:0}
</style>
    <div style="position:absolute;vertical-align: top; right:0px; top:0px; z-index:999; width:24px; height:16px; background:#ccc; opacity:0.5 ">
        <a style="vertical-align: top;">  <svg style="width:22px;height:15px; display:inline-block;fill: #00aecd;" class="adname" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 16">
       <path d="M10.90 4.69L10.90 5.57L3.17 5.57L3.17 7.22L3.17 7.22Q3.17 9.15 3.06 10.11L3.06 10.11L3.06 10.11Q2.95 11.07 2.58 11.92L2.58 11.92L2.58 11.92Q2.21 12.77 1.27 13.56L1.27 13.56L0.59 12.93L0.59 12.93Q2.29 11.82 2.29 8.66L2.29 8.66L2.29 4.69L6.11 4.69L6.11 2.95L7.00 2.95L7.00 4.69L10.90 4.69ZM23.00 7.34L23.00 8.22L12.80 8.22L12.80 7.34L17.55 7.34L17.55 5.53L15.12 5.53L15.12 5.53Q14.55 6.53 13.86 7.07L13.86 7.07L13.10 6.46L13.10 6.46Q14.44 5.46 14.95 3.33L14.95 3.33L15.84 3.55L15.84 3.55Q15.77 3.86 15.49 4.65L15.49 4.65L17.55 4.65L17.55 2.84L18.47 2.84L18.47 4.65L21.86 4.65L21.86 5.53L18.47 5.53L18.47 7.34L23.00 7.34ZM21.45 8.88L21.45 13.63L20.53 13.63L20.53 12.78L15.32 12.78L15.32 13.63L14.41 13.63L14.41 8.88L21.45 8.88ZM15.32 11.90L20.53 11.90L20.53 9.76L15.32 9.76L15.32 11.90Z"></path></svg>
        </a>
        <!--<a style="display:none;">
         <svg style="width:15px;height:15px; display:inline-block;fill: #00aecd;stroke: #00aecd; stroke-width: 1.25;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 15 15"><path d="M3.25,3.25l8.5,8.5M11.75,3.25l-8.5,8.5"></path></svg>
        </a>-->
    </div>    
    <div  id="AdElement" class="viewbox">
        
      <!--  <preview-medias-screen
         v-bind:trackerclick="trackContentInteraction"   
         v-on:initstyle="InitSyle"  
         v-bind:medias-id="mediasId"></preview-medias-screen>-->
    </div>    
    {# 下面是各种广告类型的模板需要  #}
    <script id="mediasTxt"  type="text/html">
           <div class="el-image">
                 <a data-href="<%= medias.linkurl %>" onclick="openurl()"  target="_blank"
                   title="<%= medias.name %>" >
                <p style="<%for (var i in content.style ){ %> <%=i%>: <%=content.style[i]%>;<% } %> " onmouseover="onMouseOver( )"><%=content.txt %></p>
              </a>
        </div>
    </script>
    {# 视频广告物料 #}
    <script id="mediasVideo"  type="text/html">
     <div class="preview-video">
                <div class="el-image">
                  
                    <video autoplay="true"  controls
                     width="<%= medias.width %>" :height="<%= medias.height %>">
                            <source src="<%=content.video %>" />
                    </video>
                </div>
            </div>
     </script>
    <!-- onclick="openurl()" href=" medias.linkurl "  -->
    <script id="mediasImages"  type="text/html">
            <div class="preview-image">
                <div class="el-image"  style="width:<%= medias.width %>px;height: <%= medias.height %>px">
                 <a   onclick="openurl()"  target="_parent"
                  title="<%= medias.name %>">
              <img  src="<%=content.image[0].url %>"
                    alt="<%=content.image[0].name %>" class="el-image__inner" />
                 </a>
                </div>
            </div>
    </script>
    {# 信息流信息 #}
    <script id="mediasStream"  type="text/html">
      <div class="preview-stream">
               <a data-href="<%= medias.linkurl %>" onclick="openurl()"   target="_blank"
             title="<%= medias.name %>">
             
            <%if (medias.cntype==1){ %>
                <div class="streamViewSan">
                 <p><%=content.subject %></p>
                 
                <div style="display:flex;  justify-content:  space-between;
                        align-items: center;
                        vertical-align: middle;">
                    <img src="<%=content.pic1 %>" style="width:32.33%;"/> 
                 
                    <img src="<%=content.pic2 %>" style="width:32.33%;"/> 
                 
                    <img src="<%=content.pic3 %>" style="width:32.33%;" />
                 
                </div>
               <p class="become" ><%=content.become %></p>
               </div>
             <% } %>

             <!-- 大图模式预览 -->
        <%if (medias.cntype==2){ %>     
        <div class="streamViewOne">
          
            <!-- 左右排列，图片在左边 -->
            <%if (content.align=='left'){ %> 
            <div style="display:flex;  justify-content:  space-between;
                        align-items: center;
                        vertical-align: middle;">
                 <div style="width:30%;">
                    <img src="<%=content.pic1 %>" style="width:100%;"/>
                </div>
                <div style="width:69.5%;">
                    <p><%=content.subject %></p>
                     <p class="become" ><%=content.become %></p>
                </div>
            </div>
            <% }else if(content.align=='right') { %>
            <!-- 图片在右边 -->
            <div style="display:flex;  justify-content:  space-between;
                        align-items: center;
                        vertical-align: middle;">
                <div style="width:69.5%;">
                    <p><%=content.subject %></p>
                     <p class="become" ><%=content.become %></p>
                </div>
                <div style="width:30%;">
                    <img src="<%=content.pic1 %>" style="width:100%;"/>
                </div>               
            </div>
             <% }else if(content.align=='top') { %>
              <!-- 图片在上方 -->
            <div>                
                <div style="width:100%;">
                    <img src="<%=content.pic1 %>" style="width:100%;"/>
                </div>  
                 <div style="width:100%;">
                    <p><%=content.subject %></p>
                     <p class="become" ><%=content.become %></p>
                </div>
            </div>
            <% } else { %>
           <!-- 上下排列，图片在上方 -->
            <div >            
               <p><%=content.subject %></p>
                 <div style="width:100%;">
                    <img src="<%=content.pic1 %>" style="width:100%;"/>
                </div>        
                <p class="become" ><%=content.become %></p>
            </div> 
             <% } %>
        </div>
         <% } %>
 <!-- 视频+标题 -->
   <%if (medias.cntype==3){ %> 
         <div class="streamViewOne">
             <p><%=content.subject %></p>
                <div>
                 <video ref="videoPlayer" controls src="<%=content.video %>"   controlslist="nodownload"                
                 class="['porel','fullwidth','mal','fla','mat','movie-show-video']"
                 style="width: 100%; height: 100%; object-fit: fill">
                </video>
                </div>              
             <p class="become" ><%=content.become %></p>         
         </div>
    <% } %>
                </a>
            </div>
    </script>
    {# flash 物料广告 #}
    <script id="mediasFlash"  type="text/html">
     <div style="position:relative;" > 
            <div style="positon: absolute; left:0; top:0;width:100%; height:100%;visibility: visible; z-index: 999;" 
             href="<%= medias.linkurl %>" onclick="openurl()">
            <iframe id="iframe1" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0"
              style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%;z-index:1; filter:alpha(opacity=0);">
              </iframe> 

            <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="flashAd" 
             width="<%= medias.width %>" height="<%= medias.height %>" style="z-index:-1">           
            <param name="data" value="<%=content.flash %>" />
            <param name="menu" value="false"/>
            <param name="wmode" value="transparent"> 
             <embed id="forfunex" src="<%=content.flash %>"
                       width="<%= medias.width %>" :height="<%= medias.height %>"                        
                        align="middle" 
                        bgcolor="#ffffff"                     
                        play="true"
                        loop="true"
                        FlashVars=""
                        wmode="transparent"
                        allowScriptAccess="sameDomain"
                        type="application/x-shockwave-flash"
                        pluginspage="http://www.adobe.com/go/getflashplayer"/>
                  </embed>                   
            </object>
             
            </div>
        </div>
    </script>
    {# html 富文本物料 #}
      <!-- 如果是富媒体 <HTML></HTML> -->
    <!-- 富媒体的浮窗广告类型2 -->
     <script id="mediasHtml"  type="text/html">
           <% if (  medias.cntype==1 ) { %>    
            <div  class="preview-html">
                <div> <%=content.html%> </div>
            </div>  
          <% } %>          
        <% if ( medias.cntype==2 ) { %>  
            <div class="preview-image">
                <div class="el-image" style="width:<%= medias.width %>px;height: <%= medias.height %>px">
                <a  data-href="<%= medias.linkurl %>" onclick="openurl()" target="_blank"
                  title="<%= medias.name %>">
                    
                   <img  src="<%= content.adpic %>" alt="<%= medias.name %>" class="el-image__inner" />
                </a>
                </div>
            </div>

         <% } %>   
    </script>
{% endblock %}

 {% block pagejs %}
 <script src="./plugins/AdsPlace/js/page/template.aio.js"></script> 
 <script>
  var ctarget = {
      options:{  customUrl:"{{ referer }}",
        impContentName:"{{ impContentName }}",
        impContentPiece:"{{ impContentPiece }}",
        impContentTarget:"{{ impContentTarget }}",
        caculateMethod:"{{caculateMethod}}",
        perPrice:"{{perPrice}}",
        parentContainer : "{{cs}}",
        disabled: "{{disabled}}", /*==2的时候广告才会显示*/

        intContentName:"{{ intContentName }}",
        intConentPiece:"{{ intConentPiece }}",
        intContentTarget:"{{ intContentTarget }}",
        trackerServer : "{{ tracker_server_url }}/matomo.php",
        trackerServerJs: "{{ tracker_server_url }}/matomo.js",
        trackerSiteId : "{{ trackerSiteId }}"
    },
    medias: {
        name: "{{ medias.name }}",
        linkurl: "{{ medias.linkurl }}",
        width: "{{ medias.width }}",
        height: "{{ medias.height }}",
        type: "{{ medias.type }}",
        cntype: "{{ medias.cntype }}",
        content:  {{ medias.content|raw }} ,
        target: "{{ medias.target }}",
    }
  };
  /**js统计的js 插入script标签加载成功后回调 */
    var _paq = window._paq = window._paq || [];    
      /*script 加载后执行*/  
    ctarget.script_onload = function () {
        /*计算 cpd 和cpm方式，在本地统计展示次数和记录当日展示*/
         if(ctarget.options.disabled !=2){
              window.parent.postMessage({container: ctarget.options.parentContainer,disabled:ctarget.options.disabled }, '*');
              return false;
          }
        /*统计服务器的地址*/          
      
        ctarget.tracker = Matomo.getTracker(ctarget.options.trackerServer , ctarget.options.trackerSiteId) ;
        //广告位所在页面的url
        ctarget.tracker.setCustomUrl( ctarget.options.customUrl);
        //tracker.trackPageView();
        //跟踪广告位某个计划投放的 展现量
        ctarget.tracker.trackContentImpression(ctarget.options.impContentName, ctarget.options.impContentPiece,  ctarget.options.impContentTarget);
       //跟踪广告位的物料展示量
        ctarget.tracker.trackContentImpression(ctarget.options.intContentName, ctarget.options.intConentPiece,  ctarget.options.intContentTarget);
        /*var vueapp = vueapp || window.vueapp;
        if(vueapp || window.vueapp){
            vueapp.ctarget = ctarget;
        }*/
        initTemplate();
    }
    ctarget.trackerClick =  function(){
        if(ctarget.options.disabled !=2){              
              return false;
          }
        /*跟踪广告位的 某个投放计划的物料 点击量*/            
       ctarget.tracker.trackContentInteraction('click',
                ctarget.options.intContentName, 
                ctarget.options.intConentPiece,
                ctarget.options.intContentTarget
        );
        /*跟踪广告位的 某个广告位同时 也点击量*/
         ctarget.tracker.trackContentInteraction('click',
                ctarget.options.impContentName, 
                ctarget.options.impContentPiece,
                ctarget.options.impContentTarget
        );
                    /* 记录点击一次统计一次电商转换*/
        if( ctarget.options.caculateMethod ==3){
           /* console.log(Math.random().toString(36).slice(2) + new Date().getTime())*/
            ctarget.tracker.addEcommerceItem(
                    'sku'+ ctarget.options.intConentPiece,
                    'n'+ctarget.options.impContentPiece,
                    'c'+ctarget.options.impContentName, parseFloat( ctarget.options.perPrice) );
                   
             ctarget.tracker.trackEcommerceOrder(Math.random().toString(36).slice(2) + new Date().getTime(), parseFloat( ctarget.options.perPrice));
        }
    }

    /**
     * 判断是否添加过tj的js 的script标签
     */
    var _all_script = document.getElementsByTagName('script');
    ctarget._has_script = false;
    if (_all_script.length){
        for (var i=0; i<   _all_script.length; i++){           
            if (_all_script[i].getAttribute("id") == encodeURIComponent(ctarget.options.customUrl) ){
                ctarget._has_script = true;
            }
        }
    }
    /**
     * 没有添加过则添加 
     */
    if (!ctarget._has_script){
        var d = document, g = d.createElement('script') ;
        g.type = 'text/javascript'; 
        //g.async = true;
        g.id = encodeURIComponent( ctarget.options.customUrl);
        g.src = ctarget.options.trackerServerJs;
        if (g.readyState) {
            g.onreadystatechange = function () {
                var state = this.readyState;
                if (state === 'loaded' || state === 'complete') {
                    g.onreadystatechange = null;
                    ctarget.script_onload();
                }
            };
        } else {
            g.onload = ctarget.script_onload;
        }
        d.getElementsByTagName('head')[0].appendChild(g);
        ctarget._has_script = true;     
    }
    //解析模板 显示广告
    function initTemplate(){
        var html = "";
        var _tpData = {
            medias: ctarget.medias,
            content:  ctarget.medias.content 
        }
        /*图片物料显示*/
      if(ctarget.medias.type=='image') {
        html = template(document.getElementById('mediasImages').innerHTML, _tpData);

      }else if(ctarget.medias.type=='html') {

        html = template(document.getElementById('mediasHtml').innerHTML, _tpData);

      }else if(ctarget.medias.type=='txt') {

        html = template(document.getElementById('mediasTxt').innerHTML, _tpData);

      }else if(ctarget.medias.type=='video') {

        html = template(document.getElementById('mediasVideo').innerHTML, _tpData);

      } else if(ctarget.medias.type=='flash') {

        html = template(document.getElementById('mediasFlash').innerHTML, _tpData);

      }else if(ctarget.medias.type=='stream') {

        html = template(document.getElementById('mediasStream').innerHTML, _tpData);
      }

        document.getElementById('AdElement').innerHTML  = html;
        /*这个是发送广告位的浮动样式信息*/
        InitSyle();
    }
    function openlybrowserurl(){
        var gotolink = document.createElement('a');
            gotolink.href = ctarget.medias.linkurl ;
            gotolink.setAttribute("target", "_blank");
            document.body.appendChild(gotolink);
            gotolink.click();
        /*alert(ctarget.medias.linkurl)
        if(!ctarget.medias.linkurl){
            return false;
        }*/
         
        window.open(ctarget.medias.linkurl); 
        /*ctarget.trackerClick();*/
    }
      /*点击广告后触发跟踪统计以及 打开广告链接*/
      function openurl(){
           
            
           var parent  =  window.parent || window;
            
            /* if(ctarget.medias.target ==2){
                parent.location.href = ctarget.medias.linkurl;
            }else{
                window.open(ctarget.medias.linkurl)
            }*/
             /*发送消息给父窗口打开链接,暂时不使用，用a链接的href打开 */
            window.parent.postMessage(ctarget.options.parentContainer +'@@'+ctarget.medias.linkurl,'*');
            /*window.postMessage({
                container: ctarget.options.parentContainer,
                linkurl:ctarget.medias.linkurl,
                target: ctarget.medias.target==2?'_self':'_blank',
                action: 'openurl'}, '*');*/
             
            ctarget.trackerClick();
            return false;  
      }
      /*文字个广告的 鼠标滑动到文本上时的hover样式*/
      function onMouseOver(){
         // console.log(ctarget.medias.content)
      }
      /*根据广告物料设置的样式 调整广告位显示位置和样式，通过postMessage 给父窗口传递消息*/
      function InitSyle(  ){
            var medias = ctarget.medias;
            medias.container = ctarget.options.parentContainer;
            medias.disabled = ctarget.options.disabled;
            window.parent.postMessage(medias, '*');
      }
   
  </script>
 {%endblock%}